import React, { Component } from 'react';
import { createPortal } from 'react-dom';
import ReactEcharts from 'echarts-for-react';
import darkEchartsTheme from '../../config/theme/darkEchartsTheme';
import echarts from 'echarts';

const modalRoot = document.getElementById('dialog-root');

class TechnologyCollegeNumChart extends Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('technologyCollegeSubjectNumChart');
    this.state = {
      chartOption: undefined,
      chartHeight: 250,
    };
  }
  componentDidMount() {
    modalRoot.appendChild(this.el);
    // echarts.registerTheme('theme_name', darkEchartsTheme);
    this.setChartData();
  }
  setChartData() {
    var color = ['#fb734e', '#e32f46', '#94d96c', '#0bbcb7', '#1a9bfc', '#7049f0'];
    var dataStyle = {
      normal: {
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        shadowBlur: 40,
        borderWidth: 10,
        shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
      }
    };
    var placeHolderStyle = {
      normal: {
        color: '#393d50',
        label: {
          show: false
        },
        labelLine: {
          show: false
        }
      },
      emphasis: {
        color: '#393d50'
      }
    };

    const option = {
      grid: {
        top: '5%',
        left: '0%',
        right: '5%',
        bottom: '60%',
        containLabel: true,
      },
      title: {
        text: '长三角26所\n全国占比27%',
        top:'43%',
        left:'23%',
        textStyle: {
          fontWeight: 'normal',
          fontSize: 12,
          color: "#fff",
        }
      },
      tooltip: {
        trigger: 'item',
        show: true,
        formatter: "{b} : <br/>{d}%",
        backgroundColor: 'rgba(0,0,0,0.2)', // 背景
        padding: [8, 10], //内边距
        extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
      },
      legend: {
        orient: 'vertical',
        // icon: 'circle',
        left: 'right',
        top: '50',
        itemGap:20,
        data: ['上海9所', '江苏13所', '浙江2所', '安徽2所'],
        textStyle: {
          fontWeight: 'normal',
          fontSize: 12,
          color: "#fff",
        }

    },
      series: [{
        name: 'Line 1',
        type: 'pie',
        clockWise: false,
        radius: [104, 110],
        center: ['36%', '50%'],
        itemStyle: dataStyle,
        hoverAnimation: false,
        startAngle: 90,
        label: {
          borderRadius: '10',
        },
        data: [{
          value: 13,
          name: '江苏13所',
          itemStyle: {
            normal: {
              color:'rgba(53, 166, 222, 1)',
            }
          }
        },
        {
          value: 13,
          name: '',
          tooltip: {
            show: false
          },
          itemStyle: placeHolderStyle
        },
        ]
      },
      {
        name: 'Line 2',
        type: 'pie',
        clockWise: false,
        radius: [84, 90],
        center: ['36%', '50%'],
        itemStyle: dataStyle,
        hoverAnimation: false,
        startAngle: 90,
        data: [{
          value: 9,
          name: '上海9所',
          itemStyle: {
            normal: {
              color:'rgba(219, 50, 51, 1)'
            }
          }
        },
        {
          value: 17,
          name: '',
          tooltip: {
            show: false
          },
          itemStyle: placeHolderStyle
        },
        ]
      },
      {
        name: 'Line 3',
        type: 'pie',
        clockWise: false,
        radius: [64, 70],
        center: ['36%', '50%'],
        itemStyle: dataStyle,
        hoverAnimation: false,
        startAngle: 90,
        data: [{
          value: 2,
          name: '浙江2所',
          itemStyle: {
            normal: {
              color:'rgba(1, 185, 131,1)',
            }
          }
        },
        {
          value: 24,
          name: '',
          tooltip: {
            show: false
          },
          itemStyle: placeHolderStyle
        },
        ]
      },
      {
        name: 'Line 4',
        type: 'pie',
        clockWise: false,
        radius: [44, 50],
        center: ['36%', '50%'],
        itemStyle: dataStyle,
        hoverAnimation: false,
        startAngle: 90,
        data: [{
          value: 2,
          name: '安徽2所',
          itemStyle: {
            normal: {
              color: 'rgba(246, 201, 0, 1)',
            }
          }
        },
        {
          value: 24,
          name: '',
          tooltip: {
            show: false
          },
          itemStyle: placeHolderStyle
        },
        ]
      }
      ]
    };
    this.setState({ chartOption: option });
  }

  render() {
    const { style, width, height } = this.props;
    const dtTitle = `世界一流学科大学数`;
    const { chartOption } = this.state;
    return createPortal(
      <div
        style={{
          ...style,
          display: 'flex',
          flexDirection: 'column',
          width: width,
          height: height,
          color: '#fff',
          backgroundColor: 'rgba(0,0,0,0.6)',
          boxShadow: '0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23)',
        }}
      >
        <div
          style={{
            lineHeight: '35px',
            height: 35,
            borderBottom: '1px solid rgb(238, 238, 238,0.2)',
            textAlign: 'center',
            fontWeight: 'bold'
          }}
        >
          <div style={{ float: 'left', marginLeft: 6, fontSize: 15 }}><div style={{ float: 'left', width: 5, height: 35, marginRight: 10, backgroundColor: 'rgba(63,177,277,1)', }} />{dtTitle}</div>
          <div style={{ float: 'right', marginRight: 8 }}>
          </div>
        </div>
        <div style={{ margin: '3px 8px 3px 8px' }}>
          <div>
            {chartOption !== undefined && (
              <ReactEcharts
                option={chartOption}
                notMerge={true}
                lazyUpdate={true}
                // theme={'theme_name'}
                style={{ height: this.state.chartHeight }}
              />
            )}
          </div>
        </div>
      </div>,
      this.el
    );
  }
}

export default TechnologyCollegeNumChart;
